\documentclass[a4paper,10pt]{article}

\usepackage[latin1]{inputenc}
\usepackage{verbatim}
\usepackage{textcomp}
\usepackage{amsmath}
\usepackage[T1]{fontenc}
\usepackage{graphicx}
\usepackage[spanish]{babel}

\begin{document}

\tableofcontents
\newpage


\section{Instalaci\'on}
\subsection{Requerimientos de software}
La aplicaci\'on fue desarrollada para correr en distribuciones basadas en GNU/Linux. Para instalar el programa se debe contar con las librerias gtkmm-2.4 y libxml-2.6. o versiones posteriores. Adem\'as se debe contar con el programa make y el g++ (utilizado por el anterior), para compilar la aplicaci\'on.
\subsection{Requerimientos de hardware}
Se necesita al menos (aproximadamente) las siguientes prestaciones:
\begin{itemize}
 \item 500 Mhz de procesador.
 \item 128 Mb de memoria RAM.
\end{itemize}

\subsection{Proceso de compilaci\'on}

Colocar el archivo EditorDeDiagramas.tar.gz en alg\'un directorio del sistema y descomprimirlo. Luego hay que posicionarse dentro del directorio donde se descomprimieron los archivos, 
y ejecutar el comando:
\begin{verbatim}
 make release
\end{verbatim}

Una vez terminado dicho proceso, se puede ir al directorio EditorDeDiagramas y correr la aplicaci\'on que se encuentra en la carpeta \textit{release}.

\section{Ejecuci\'on de la aplicaci\'on}
Para ejecutar el programa hay que ir a la carpeta \textit{release} y ejecutar el siguiente comando:
\begin{verbatim}
 ./gui
\end{verbatim}

\section{Configuraci\'on}
Al ejecutar el \textit{makefile}, ya se configuran las variables y directorios de los ejecutables y datos necesarios para correr el programa.

\section{Forma de uso}
En los siguientes apartados se explica como utilizar las distintas funcionalidades que provee la aplicaci\'on.

\subsection{Men\'u principal}
Esta secci\'on es la que nos va a permitir hacer todo tipo de acciones sobre el diagrama.

\begin{center}
 \includegraphics[width=5 cm,height=0.7 cm]{./menuprincipal.png}
 % menuprincipal.png: 258x24 pixel, 72dpi, 9.10x0.85 cm, bb=0 0 258 24
\end{center}

 La barra de me\'u principal cuenta con: File, Edit, Options y Help. La primera opci\'on \textbf{File} cuenta con lo b\'asico de cualquier aplicaci\'on, crear, abrir, guardar, etc. La
 segunda \textbf{Edit} es la que permite Copiar, Cortar, Borrar, Crear Subdiagrama y Exportar Subdiagrama; todas estas funcionan luego de haber seleccionado uno o varios elementos. La tercera
 opci\'on \textbf{Options} cuenta con Propiedades que es lo mismo que hacer click derecho sobre el elemento y entrar a sus propiedades; y con Validate, que se encarga de validar el diagrama. Finalmente
 se encuentra \textbf{Help}, el cual tiene el Acerca De... que es donde se puede ver informaci\'on de la versi\'on del trabajo y los creadores; y por debajo tenemos Help que abrir\'a este manual
 de usuario.

\subsection{Barras de la aplicaci\'on}
\begin{enumerate}

 \item Barra de Herramientas
 \begin{center}
 \includegraphics[width=12 cm,height=1 cm]{./barra_herramientas.png}
 % barra_herramientas.png: 503x40 pixel, 72dpi, 17.74x1.41 cm, bb=0 0 503 40
\end{center}

 Dicha barra pose\'e las siguientes opciones de izquierda a derecha: New diagram, Open diagram, Save diagram, Print diagram, Copy, Cut, Delete, Properties, Create Subdiagram, Export Subdiagram, Validate, Help.
 
 \item Barra de Componentes 
 
 \begin{center}
 \includegraphics[width=3 cm,height=8 cm]{./barra_componentes.png}
 % barra_componentes.png: 131x400 pixel, 72dpi, 4.62x14.11 cm, bb=0 0 131 400
\end{center}
 
 Dicha barra pose\'e los siguientes elementos de arriba hacia abajo: Entidad, Relaci\'on, Atributo, Atributo Compuesto y Jerarqu\'ia.
 
\end{enumerate}

\subsection{Creaci\'on de un diagrama}
Al ejecutar el programa de la forma anteriormente se\~{n}alada, se abre una ventana donde tenemos la posibilidad mediante el \textbf{Men\'u Principal} o la herramienta \textbf{New diagram} de elegir la opci\'on \textbf{Nuevo diagrama}, dicha opci\'on nos permitir\'a crear un diagrama nuevo en el programa para poder trabajar. Acto siguiente
a esta acci\'on, el programa nos solicitar\'a que ingresemos un nombre para el diagrama que estamos creando.

\begin{center}
 \includegraphics[width=14 cm,height=11 cm]{./menu_file.png}
 % menu_file.png: 1024x600 pixel, 72dpi, 36.12x21.17 cm, bb=0 0 1024 600
\end{center}

\begin{center}
 \includegraphics[width=4.5 cm,height=3 cm]{./ventana_nuevo.png}
 % ventana_nuevo.png: 230x142 pixel, 72dpi, 8.11x5.01 cm, bb=0 0 230 142
\end{center}

\begin{center}
 \includegraphics[width=14 cm,height=11 cm]{./nuevo_diagrama.png}
 % menu_file.png: 1024x600 pixel, 72dpi, 36.12x21.17 cm, bb=0 0 1024 600
\end{center}


Una vez hecho esto, vamos a poder utilizar la \textbf{Barra de Componentes} sobre nuestro diagrama. Sobre esta \'area recientemente creada podemos agregar los distintos elementos que integran un diagrama.\\
Para crear un elemento vamos a utilizar la \textbf{Barra de Componentes} en la cual se debe clickear sobre el boton correspondiente haciendo click o arrastrandolo hacia la posici\'on deseada. 
Los elementos disponibles en la \textbf{Barra de Componentes} son los mostrados anteriormente.

\begin{center}
 \includegraphics[width=14 cm,height=9 cm]{./elementos.png}
 % menu_file.png: 1024x600 pixel, 72dpi, 36.12x21.17 cm, bb=0 0 1024 600
\end{center}

\subsubsection{Propiedades de los elementos}
Cada elemento dentro de la logica del diagrama tiene funciones particulares que son propias del mismo, cada elemento cuenta
con un men\'u en el cual se pueden modificar sus propiedades. Dicho men\'u de propiedades es accedido utilizando click derecho sobre
los componentes. \\
A continuacion mostraremos las propiedades de cada uno de los componentes:
\begin{itemize}
 \item Entidad 
\begin{enumerate}
 \item Nombre del componentes
 \item Tipos : Radio button que permite elegir el tipo de entidad que ingresamos en el diagrama para indicar como se relaciona con las demas entidades.
\end{enumerate}

\begin{center}
 \includegraphics[width=14 cm,height=9 cm]{./prop_ent.png}
 % menu_file.png: 1024x600 pixel, 72dpi, 36.12x21.17 cm, bb=0 0 1024 600
\end{center}

 \item Relaci\'on
\begin{enumerate}
 \item Nombre del componente
 \item Tipos : Radio button que permite elegir el tipo de relacion que va a unir a dos entidades.
\end{enumerate}
\begin{center}
 \includegraphics[width=14 cm,height=9 cm]{./prop_rel.png}
 % menu_file.png: 1024x600 pixel, 72dpi, 36.12x21.17 cm, bb=0 0 1024 600
\end{center}

 \item Atributo
\begin{enumerate}
 \item Nombre del componente
 \item Tipos : Radio button que permite elegir el tipo de atributo que ingresamos en el diagrama para indicar que relacion posee cuando se lo asocia a una entidad.
 \item Expresion: Agrega un texto debajo del atributo como una expresion del mismo.
\end{enumerate}
\begin{center}
 \includegraphics[width=14 cm,height=9 cm]{./prop_atr.png}
 % menu_file.png: 1024x600 pixel, 72dpi, 36.12x21.17 cm, bb=0 0 1024 600
\end{center}

 \item Atributo Compuesto
\begin{enumerate}
 \item Nombre del componentes
 \item Tipos : Radio button que permite elegir el tipo de atributo que ingresamos en el diagrama para indicar que relacion posee cuando se lo asocia a una entidad.
 \item Expresion: Agrega un texto debajo del atributo como una expresion del mismo.
\end{enumerate}
\begin{center}
 \includegraphics[width=14 cm,height=9 cm]{./prop_atr_comp.png}
 % menu_file.png: 1024x600 pixel, 72dpi, 36.12x21.17 cm, bb=0 0 1024 600
\end{center}

 \item Jerarquia
\begin{enumerate}
 \item Nombre del componentes
 \item Tipos : Radio Button que permite elegir entre una jerarquia de generalizacion o especializacion de entidades.
\end{enumerate}
\begin{center}
 \includegraphics[width=14 cm,height=9 cm]{./prop_jerarq.png}
 % menu_file.png: 1024x600 pixel, 72dpi, 36.12x21.17 cm, bb=0 0 1024 600
\end{center}

 \item Via con Cardinalidades
\begin{enumerate}
 \item Nombre del componentes
 \item Tipos : Radio Button que permite elegir entre distintos tipos de cardinalidades para relacionar entidades.
\end{enumerate}
\begin{center}
 \includegraphics[width=14 cm,height=9 cm]{./prop_via_con_card.png}
 % menu_file.png: 1024x600 pixel, 72dpi, 36.12x21.17 cm, bb=0 0 1024 600
\end{center}

\end{itemize}

\subsubsection{Conexi\'on entre elementos}
Para conectar dos elementos entre si se debe clickear sobre uno de ellos y manteniendo apretado el click, arrastrar el cursor hasta el el otro elemento que se quiere relacionar. Cuando se esta dibujando de esta manera la l\'inea, se pinta de color verde el contorno del elemento por el cual pasa el cursor, con el fin de facilitar la conexi\'on del mismo con la l\'inea.
Si se suelta el click del mouse durante la conexi\'on fuera de un elemento, no se crea la l\'inea ya que no se permiten l\'ineas sin conectar. 
\begin{center}
 \includegraphics[width=14 cm,height=9 cm]{./union_elem.png}
 % menu_file.png: 1024x600 pixel, 72dpi, 36.12x21.17 cm, bb=0 0 1024 600
\end{center}
\subsubsection{Edici\'on de l\'ineas}
Las l\'ineas est\'an conformadas por al menos tres segmentos entre horizontales y verticales, y es posible modificar el trazado de los mismos. Para ello se debe clickear sobre el segmento a editar y arrastrarlo hasta la posici\'on deseada. Al posicionar el cursor sobre alg\'un segmento, la l\'inea cambia de color y el cursor cambia de estado indicando una posible edici\'on del trazado. Mientras se esta moviendo un segmento, se crear\'an los segmentos necesarios para mantener los segmentos ortogonales entre si. Dos segmentos se unen autom\'aticamente cuando existe un tercero entre ellos de escasa longitud.

\subsection{Abrir y guardar diagramas}
Para guardar un diagrama se puede hacer click en la Barra de Herramientas o acceder desde el Men\'u Principal dentro de File en la opci\'on SaveDiagram. Para abrir se procede de la misma forma pero utilizando la opci\'on Open.
Al guardar un diagrama se generar\'an dos archivos: uno con el postfijo -comp y otro con el postfijo -rep. A la hora de abrir un diagrama se debe abrir desde el archivo -comp.

\subsection{Impresi\'on de diagramas}
La aplicaci\'on ofrece distintas formas de presentar un diagrama, accedi\'endolas desde el men\'u File/Archivo:
\begin{itemize}
\item Vista previa: permite la previsualizaci\'on del diagrama antes de la impresi\'on del mismo. 
\item Impresi\'on : Es posible elegir la configuraci\'on de p\'agina utilizando la opci\'on Propiedades en el men\'u file. 
\item Exportar a PDF
\item Exportar a PNG
\end{itemize}

\subsection{Propiedades y edici\'on de elementos}
En todas estas acciones las conexiones se mantienen intactas y las l\'ineas siguen a sus conectores.
Adem\'as se pueden aplicar las siguientes acciones a un grupo de elementos seleccionados previamente:
\begin{enumerate}
 \item Copiar
 \item Cortar
 \item Borrar
\end{enumerate}
Al momento de copiar o cortar varios elementos, se mantienen las l\'ineas que conectan elementos de la selecci\'on, mientras que se desconectan las lineas que conectan algun elemento que no este seleccionado. Cuando se borra una selecci\'on tambi\'en se eliminan todas las l\'ineas que se encuentren conectadas a los elementos de la misma.
Cuando se mueve una selecci\'on las l\'ineas siguen a sus conectores, realizando autom\'aticamente un nuevo trazado de ser necesario.

\subsection{Validaci\'on de un diagrama}

El proceso de validaci\'on es el encargado de ver sobre todos los elementos del diagrama la completitud del dise\~{n}o en cada uno de los componentes. Para poder validar un diagrama se puede ir desde el bot\'on que se encuentra en la Barra de Herramientas o desde el Men\'u Principal dentro de Options, la opci\'on Validate. Al proceder a validar
un diagrama la aplicaci\'on nos va a sugerir un nombre para el archivo a generar (.html) el cual contendr\'a la informaci\'on del resultado de la validaci\'on.

\begin{center}
 \includegraphics[width=13 cm ,height=8 cm]{./validar_diag.png}
 % validar_diag.png: 730x600 pixel, 72dpi, 25.75x21.17 cm, bb=0 0 730 600
\end{center}


\subsection{Usabilidad}
La idea central de nuestro trabajo fue lograr una aplicaci\'on que sea f\'acil de utilizar. Dicha tarea no siempre se puede conseguir a la hora de desarrollar. 
Lo que nosotros busc\'abamos era que si queremos generar un diagrama sea una tarea f\'acil e intuitiva con las herramientas de la aplicaci\'on, similares a otras que utilizamos en la vida cotidiana en otro tipo de aplicaciones. Es por eso que invertimos mucho tiempo en saber utilizar bien la librer\'ia de Drag \& Drop. \\
Nosotros consideramos que la utilizaci\'on del mouse para crear elementos y arrastrarlos era clave a la hora de lograr una aplicaci\'on de f\'acil uso, para cualquier tipo de usuario, no necesariamente un usuario experto.  \\
En un primer momento analizamos otras aplicaciones (Enterprise Architect, Astah, Dia, Yed) y vimos todos los puntos a favor que ten\'ian. Esos mismos puntos son los que buscamos tener en nuestra aplicaci\'on. La utilizaci\'on del mouse junto a la sencillez de los men\'us sab\'iamos 
que nos iba a contribuir en gran medida para lograr un buen programa. \\

\section{Ejemplos dados por la c\'atedra}
Estos ejemplos se encuentran en el directorio \textbf{ejemplos} dentro del directorio de la aplicaci\'on descomprimida inicialmente. All\'i se pueden ver todos los archivos que fueron generados al crear dichos diagramas dados por la c\'atedra. Aqu\'i abajo
se pueden ver todos los diagramas dados.
\begin{itemize}
\item Boleter\'ia

\begin{center}
 \includegraphics[width=15 cm,height=10 cm]{./Boleteria.png}
 % Boleteria.png: 838x426 pixel, 72dpi, 29.56x15.03 cm, bb=0 0 838 426
\end{center}

\newpage

\item Cartelera Teatral
\begin{center}
 \includegraphics[width=15 cm,height=10 cm]{./CarteleraTeatral.png}
 % CarteleraTeatral.png: 977x419 pixel, 72dpi, 34.47x14.78 cm, bb=0 0 977 419
\end{center}

\newpage

\item Cuenta Corriente
\begin{center}
 \includegraphics[width=15 cm,height=10 cm]{./CtaCte.png}
 % CtaCte.png: 901x418 pixel, 72dpi, 31.79x14.75 cm, bb=0 0 901 418
\end{center}

\newpage

\item Mensajer\'ia
\begin{center}
 \includegraphics[width=15 cm ,height=10 cm]{./Mensajeria.png}
 % Mensajeria.png: 989x540 pixel, 72dpi, 34.89x19.05 cm, bb=0 0 989 540
\end{center}

\newpage

\item Promo Hiper
\begin{center}
 \includegraphics[width=15 cm,height=10 cm]{./PromoHiper.png}
 % PromoHiper.png: 846x568 pixel, 72dpi, 29.84x20.04 cm, bb=0 0 846 568
\end{center}

\newpage

\item Servicios
\begin{center}
 \includegraphics[width=15 cm ,height=10 cm]{./Servicios.png}
 % Servicios.png: 765x401 pixel, 72dpi, 26.99x14.15 cm, bb=0 0 765 401
\end{center}

\newpage

\item Taller
\begin{center}
 \includegraphics[width=15 cm ,height=10 cm]{./Taller.png}
 % Taller.png: 923x562 pixel, 72dpi, 32.56x19.83 cm, bb=0 0 923 562
\end{center}


\end{itemize}

\end{document}
